<!--
  功能说明：顶部导航栏组件，提供页面导航与登录状态展示。
-->
<template>
  <nav class="nav">
    <router-link to="/users">用户列表</router-link>
    <router-link to="/form">表单示例</router-link>
    <router-link to="/files">文件示例</router-link>
    <span class="spacer"></span>
    <template v-if="isAuthenticated">
      <span>欢迎，{{ user?.name }}</span>
      <button class="link" @click="logout">注销</button>
    </template>
    <template v-else>
      <router-link to="/login">登录</router-link>
    </template>
  </nav>
  <div v-if="lastError" class="error">错误：{{ lastError.message }} ({{ lastError.status }})</div>
  <hr />
  <div class="tip">该项目为 Vue + Axios 集成示例，包含拦截器、封装、mock 与功能页面。</div>
  <hr />
  
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'NavBar',
  computed: {
    ...mapState('auth', ['user']),
    ...mapGetters('auth', ['isAuthenticated']),
    ...mapState('error', ['lastError'])
  },
  methods: {
    logout() {
      this.$store.dispatch('auth/logout')
    }
  }
}
</script>

<style>
.nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.spacer { flex: 1; }
.link { background: none; border: none; color: #42b983; cursor: pointer; }
.error { background: #ffecec; color: #c00; padding: 8px; margin: 8px 0; }
.tip { color: #666; font-size: 13px; }
</style>